<template>
  <div class="classify">
    <!-- 头部 -->
    <top-module bgColor="#FF8E96">
      <div slot="center" class="tit">
        商品分类
      </div>
    </top-module>
    <div class="cen">
      <ul class="title">
        <li v-for="(item,index) in CategoryTitlelist" :key="index" @click="cutNav(item.maitKey)" :class="maitKeys==item.maitKey?'active':''">
          {{item.title}}
        </li>
      </ul>
      <div class="Items">
        <ul>
          <li v-for="(item,index) in CategoryItemList" :key="index">
            <img :src="item.image" alt="">
            <p>{{item.title}}</p>
          </li>
        </ul>
        <div class="threeNavs">
          <ThreeNav></ThreeNav>
        </div>
      </div>
    </div>
    <bottom-module></bottom-module>
  </div>
</template>

<script>
//引入组件
import bottomModule from "../../components/commonality/bottomModule.vue"; //底部
import TopModule from "../../components/commonality/topModule.vue"; //头部
import {
  queryCategoryTitleDatat,
  queryCategoryItemDatat,
} from "@/netWork/api/index.js";
import ThreeNav from "../../components/commonality/threeNav.vue"; //三级切换
export default {
  components: { bottomModule, TopModule, ThreeNav },
  name: "classify",
  data() {
    return {
      CategoryTitlelist: [], //标题数据
      maitKeys: 3627,
      CategoryItemList: [], //详情数据
    };
  },
  mounted() {
    this.CategoryTitleDatat();
    this.CategoryItemDatat();
  },
  methods: {
    CategoryTitleDatat() {
      queryCategoryTitleDatat().then((res) => {
        // console.log(res.data.data.category.list);
        this.CategoryTitlelist = res.data.data.category.list;
      });
    },
    CategoryItemDatat() {
      queryCategoryItemDatat(this.maitKeys).then((res) => {
        console.log(res.data.data.list);
        this.CategoryItemList = res.data.data.list;
      });
    },
    cutNav(key) {
      this.maitKeys = key;
      // console.log(this.maitKeys);
      this.CategoryItemDatat();
    },
  },
};
</script>

<style lang="scss" scoped>
.classify {
  width: 100%;
  margin-bottom: 80px;
  .tit {
    width: 100%;
    line-height: 50px;
    font-size: 19px;
    color: #fff;
    text-align: center;
  }
  .cen {
    width: 100%;
    display: flex;
    margin-top: 50px;
    position: relative;
    .title {
      flex: 3;
      background: #f7f5f7;
      position: fixed;
      left: 0;
      // top: 0;
      width: 100px;
      li {
        padding: 12px 0;
        text-align: center;
      }
      .active {
        background: #fff;
        border-left: 5px solid #ff8e97;
        color: #ff8e97;
      }
    }
    .Items {
      flex: 9;
      margin-left: 100px;
      ul {
        
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        li {
          width: 33.33%;
          text-align: center;
          padding: 12px 0;
          height: 120px;
          img {
            width: 60%;
          }
          p {
            color: #555;
            text-align: center;
          }
        }
      }
    }
    .threeNavs{
      width: 310px;
    }
  }
}
</style>